<template>
  <div class="login-container">
    <el-form ref="ruleForm" :model="loginForm" :rules="rules">
      <div class="title-container">
        <h2>{{ $t('login.title') }}</h2>
      </div>
      <el-form-item prop="username" class="input-container">
        <svg-icon icon="user" class="svg-icon-container"></svg-icon>
        <el-input v-model="loginForm.username" />
      </el-form-item>
      <el-form-item prop="password" class="input-container" @keyup.enter="onSubmit(ruleForm)">
        <svg-icon icon="password" class="svg-icon-container"></svg-icon>
        <el-input :type="passwordType" v-model="loginForm.password" />
        <svg-icon :icon="passwordType === 'password' ? 'eye' : 'eye-open'"
                  @click="changeType"
                  class="svg-icon-eye"></svg-icon>
      </el-form-item>
      <el-form-item class="login-button-container">
        <el-button type="primary" @click="onSubmit(ruleForm)">{{ $t('login.btnTitle') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { loginFormRule } from '@/datas/rules/login'
import { useStore } from 'vuex'
const store = useStore()
const loginForm = ref({
  username: 'admin',
  password: '123456'
})

const ruleForm = ref(null)
const rules = ref(loginFormRule)

const passwordType = ref('password')
const changeType = () => {
  if (passwordType.value === 'password') {
    passwordType.value = 'text'
  } else {
    passwordType.value = 'password'
  }
}

const onSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      store.dispatch('app/login', loginForm.value)
    } else {
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
$dark_gray: #889aa4;
$bg: #2d3a4b;

.login-container{
  width: 100%;
  min-height: 100%;
  background-color: $bg;
  text-align: center;

  .el-form{
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -25%);
    background-color: #336699;
    border-radius: 5px;
    width: 350px;
    height: 250px;
    padding: 15px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title-container{
      padding: 5px 0;
      h2{
        color: white;
      }
    }

    .input-container{
      position: relative;
      :deep(.el-input__inner){
        padding: 0 42px;
      }
      .svg-icon-container, .svg-icon-eye{
        position: absolute;
        z-index: 1;
        padding: 6px 5px 6px 15px;
        color: $dark_gray;
        vertical-align: middle;
        display: inline-block;
      }
      .svg-icon-eye{
        right: 8px;
        cursor: pointer;
      }
    }

    :deep(.el-form-item__label){
      color: white;
    }

    .login-button-container{
      :deep(.el-form-item__content){
        justify-content: center;
        button{
          width: 50%;
        }
      }
    }
  }
}
</style>
